<template>
	<view class="container" :style="'min-height:' +pageHei+';'">
		<view class="part3">
			<view class="card-box" v-if="isHead">
				<view class="ctop-box">
					<view class="ctop-info">
						<text class="ctop-info-text1">{{useData.realName}}<text class="ctop-info-text2">{{useData.posts}}</text></text>
					</view>
					<text class="tip-comp">{{acComp}}</text>
				</view>
				<view class="c-bom">
					<view class="c-bom-item" v-if="useData.contactNumber">
						<text class="c-bom-text1">电 话： </text>
						<text class="c-bom-text2" @click="callPhone(useData.contactNumber)">{{useData.contactNumber}}</text>
					</view>
					<view class="bor" v-if="useData.contactNumber"></view>
					<view class="c-bom-item" v-if="useData.email">
						<text class="c-bom-text1">邮 箱： </text>
						<text class="c-bom-text2">{{useData.email}}</text>
					</view>
					<view class="bor" v-if="useData.email"></view>
					<view class="c-bom-item" v-if="useData.address">
						<text class="c-bom-text1">城 市： </text>
						<text class="c-bom-text2">{{useData.address}}</text>
					</view>
					<view class="bor" v-if="useData.address"></view>
					<view class="c-bom-item" v-if="useData.moreAddr" @click="showMap">
						<text class="c-bom-text1">地 址： </text>
						<text class="c-bom-text2">{{useData.moreAddr}}</text>
					</view>
					<view class="bor" v-if="useData.moreAddr"></view>
				</view>
				<view class="logo-box">
					<image class="logo-img" @click="previewImg(['https://www.ydylmold.cn/images/ydylapp/usrCraftsman/image/'+useData.headImg])" :src="'https://www.ydylmold.cn/images/ydylapp/usrCraftsman/image/'+useData.headImg" mode="">
					</image>
				</view>
				<view class="logo-box2">
					<u-image class="logo-img" width="120rpx" height="120rpx" :lazyLoad="true" @click="previewImg(['https://www.ydylmold.cn/images/ydylapp/usrCraftsman/craftsmanHomepageCode/'+useData.homepageCode])" :src="'https://www.ydylmold.cn/images/ydylapp/usrCraftsman/craftsmanHomepageCode/'+useData.homepageCode" style="width: 140rpx;height: 140rpx;"></u-image>
				</view>
			</view>
			<view class="card-box" style="padding: 40rpx 0 0 0;" v-else>
				<view class="ctop-box">
					<view style="font-size: 36rpx;font-weight: bold;text-align: center;">业务范围</view>
				</view>
				<view class="c-bom" style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<view v-if="useData.businessScope" class="c-bom-item" v-for="(item,index) in useData.businessScopeList" :key="index" style="line-height: 60rpx;display: flex;flex-direction: column;align-items: flex-start;">
						<view class="c-bom-text2" style="font-size: 30rpx;font-weight: bold;" v-if="item"><text style="margin-right: 10rpx;">※</text> {{item }}</view>
					</view>
					<view v-else class="c-bom-item" style="line-height: 60rpx;display: flex;flex-direction: column;align-items: flex-start;">
						<view class="c-bom-text2" style="font-size: 30rpx;font-weight: bold;">暂未填写</view>
					</view>
				</view>
			</view>

			<view class="btn-box">
				<text class="btn-box-text2" @click="isHead = !isHead" style="color: #FFFFFF;background-color: #009CFF;margin-right: 10rpx;">翻转名片</text>
				<text class="btn-box-text2" @click="openPop" v-if="!isOther">编辑名片</text>
			</view>
		</view>
		<u-popup :show="showPop" @close="showPop = false" closeable>
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<!-- :rules="rules" -->
			<view class="con-box" style="padding: 30rpx 24rpx;">
				<u-form labelPosition="left" :model="model1" ref="uForm">
					<u-form-item label="姓名" prop="userInfo.realName" borderBottom ref="realName">
						<u--input v-model="model1.userInfo.realName" border="none" placeholder="请填写姓名"></u--input>
					</u-form-item>
					<u-form-item label="公司" prop="acComp" borderBottom ref="acComp">
						<uni-data-picker @change="handleChangeComp" :showAll="false" placeholder="请选择企业" popup-title="选择企业" :localdata="compData">
							<u--input v-model="acComp" disabled border="none" disabledColor="#ffffff" placeholder="请选择企业" style="width: 500rpx;">
							</u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</uni-data-picker>
					</u-form-item>
					<u-form-item label="职务" prop="userInfo.posts" borderBottom ref="posts">
						<u--input v-model="model1.userInfo.posts" border="none" placeholder="请填写职务"></u--input>
					</u-form-item>
					<u-form-item label="电话" prop="userInfo.contactNumber" borderBottom ref="contactNumber">
						<u--input v-model="model1.userInfo.contactNumber" type="number" border="none" placeholder="请填写电话">
						</u--input>
					</u-form-item>
					<u-form-item label="邮箱" prop="userInfo.email" borderBottom ref="email">
						<u--input v-model="model1.userInfo.email" border="none" placeholder="请填写邮箱"></u--input>
					</u-form-item>
					<u-form-item label="城市" prop="userInfo.address" borderBottom ref="address">
						<uni-data-picker seltype="city" @changeCityData="changeCityData" :showAll="true" :currDataCity="currDataCity" placeholder="请选择地区" popup-title="选择地区" @change="handleChangeAddress">
							<u--input v-model="model1.userInfo.address" disabled border="none" disabledColor="#ffffff" placeholder="请选择地区"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</uni-data-picker>
					</u-form-item>
					<u-form-item label="地址" prop="userInfo.moreAddr" borderBottom ref="moreAddr">
						<u--input v-model="model1.userInfo.moreAddr" border="none" placeholder="请填写地址"></u--input>
					</u-form-item>
					<u-form-item label="业务" prop="userInfo.businessScope" borderBottom ref="businessScope">
						<textarea v-model="model1.userInfo.businessScope" placeholder="请填写业务" style="width: 550rpx;height: 150rpx;border: 1rpx solid rgb(214, 215, 217);border-radius: 10rpx;padding: 10rpx;"></textarea>
					</u-form-item>
				</u-form>

			</view>
			<view class="btn-box" style="display: flex;align-items: center;justify-content: space-around;padding-bottom: 30rpx;">
				<button type="default" style="margin: 0;padding: 0;font-size: 30rpx;width: 300rpx;" @click="showPop = false">取消</button>
				<button type="primary" style="background-color: #0080FF;margin: 0;padding: 0;font-size: 30rpx;width: 300rpx;" @click="confirmData">确定</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		queryEnterpriseContact,
		updateCraftsman
	} from '@/common/api/auth.js'
	import {
		getToken
	} from '@/utils/token.js'
	// #ifdef MP-WEIXIN
	import {
		shareMixins
	} from '@/mixins/share'
	// #endif
	export default {
		// #ifdef MP-WEIXIN
		mixins: [shareMixins],
		// #endif
		data() {
			return {
				pageHei: '100vh',
				useData: {}, //个人信息
				acComp: getToken('complogin').companyNameCn,
				showComp: false,
				model1: {
					userInfo: {
						realName: '', //姓名
						posts: '', //职位
						companyNo: '', //公司名
						contactNumber: '', //电话
						email: '', //邮箱
						address: '', //城市
						moreAddr: '', //地址
						businessScope: '', //业务
						craftsmanId: getToken('useNum')
					},
				},

				radio: '',
				switchVal: false,
				showPop: false,
				compData: [],
				isOther: false,
				craftsmanId: '',
				isHead: true,
				isShare: false,
				//选择框
				currDataCity: {}
			}
		},

		onLoad: function(option) {
			if (option.useId) {
				this.craftsmanId = option.useId
				if (this.craftsmanId != getToken('useNum')) {
					this.isOther = true
				}
			} else {
				this.craftsmanId = getToken('useNum')
			}
			this.isShare = option.isShare ? true : false
			uni.getSystemInfo({
				success: (res) => {
					this.pageHei = res.windowHeight * 2 + 'rpx'
				}
			})
			this.queryEnterpriseContact()
			this.queryCraftsmanById()

		},

		methods: {
			// 改变城市选择数据
			changeCityData(e) {
				this.currDataCity = e
				//console.log(this.currDataCity)
			},
			previewImg(arr) {
				uni.previewImage({
					urls: arr
				})
			},

			openPop() {
				this.model1.userInfo.realName = this.useData.realName || ''
				this.model1.userInfo.posts = this.useData.posts || ''
				this.model1.userInfo.companyNo = this.useData.companyNo || ''
				this.model1.userInfo.contactNumber = this.useData.contactNumber || ''
				this.model1.userInfo.email = this.useData.email || ''
				this.model1.userInfo.address = this.useData.address || ''
				this.model1.userInfo.moreAddr = this.useData.moreAddr || ''
				//console.log(this.model1.userInfo)
				if (this.useData && this.useData.businessScope) {
					let str = this.useData.businessScope.split(' ').join('\n')
					this.model1.userInfo.businessScope = str
					//console.log(this.model1.userInfo.businessScope, 898989)
				} else {
					this.model1.userInfo.businessScope = ''
				}
				this.showPop = true

			},
			confirmData() {
				let params = this.model1.userInfo
				if (!params.realName) {
					this.$u.toast('请填写姓名')
				} else if (!params.contactNumber) {
					this.$u.toast('请填写电话')
				} else if (!params.email) {
					this.$u.toast('请填写邮箱')
				} else if (!params.moreAddr) {
					this.$u.toast('请填写地址')
				} else {
					//console.log(params)
					let str = params.businessScope.split('\n').join(' ')
					//console.log(str, 666)
					params.businessScope = str
					updateCraftsman(params).then(res => {
						//console.log(res, '成功')
						this.$store.commit('isFresh', true)
						this.showPop = false
						this.queryCraftsmanById()
					})
				}
			},
			//地址选择回调处理
			handleChangeAddress(data) {
				let list = data.detail.value
				if (list && list.length) {
					this.model1.userInfo.address = list.map(s => {
						return s.text
					}).join(' ')
				}
			},
			handleChangeComp(data) {
				if (data.detail.value && data.detail.value[0]) {
					this.acComp = data.detail.value[0].companyNameCn
					this.model1.companyNo = data.detail.value[0].companyId
				}
			},
			queryEnterpriseContact() {
				queryEnterpriseContact({
					userId: this.craftsmanId,
					craftsmanId: this.craftsmanId
				}).then(res => {
					if (res.statusCode == 200) {
						res.data && res.data.usrCompanyList && res.data.usrCompanyList.forEach(
							m => {
								if (m.companyId == this.useData.companyNo) {
									m.text = m.companyNameCn
									m.value = m.companyId
									m.children = []
									this.compData.push(m)
								}
							})
					}

				})
			},
			async queryCraftsmanById() {
				let data = await this.$store.dispatch('queryCraftsmanById', {
					userId: this.craftsmanId,
					isShare: this.isShare
				})
				if (data.craftsmanId) {
					this.useData = data
					if (this.useData && this.useData.businessScope) {
						this.useData.businessScopeList = this.useData.businessScope.split(' ')
					}
					if (this.useData && this.useData.usrCompany && this.useData.usrCompany.companyNameCn) {
						this.acComp = this.useData.usrCompany.companyNameCn
					}
				}

			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-image: url("https://job.ydylmold.cn/mingpian/image/comIndex/bg_mingpian.jpg");
		background-size: cover;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;

		//名片
		.part3 {
			width: 100%;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;

			.card-box {
				width: 686rpx;
				min-height: 423rpx;
				background-image: url('https://job.ydylmold.cn/mingpian/image/comIndex/mingpian.png');
				background-size: cover;
				padding: 40rpx 0 0 128rpx;
				box-sizing: border-box;
				margin-bottom: 40rpx;
				position: relative;
				border-radius: 10rpx;
			}

			.ctop-info {
				display: flex;
				font-size: 41rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #1166B1;
				align-items: flex-end;
				line-height: 41rpx;
			}

			.ctop-info-text2 {
				font-size: 23rpx;
				margin-left: 16rpx;
				line-height: 23rpx;
			}

			.logo-box,
			.logo-box2 {
				position: absolute;
			}

			.logo-box2 {
				/* #ifdef MP-WEIXIN */
				bottom: 47rpx;
				right: 42rpx;
				/* #endif */
				/* #ifndef MP-WEIXIN */
				bottom: 0rpx;
				right: 0rpx;
				/* #endif */

			}

			.logo-box {
				top: 47rpx;
				right: 42rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.logo-text {
				font-size: 15rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #1166B1;
				line-height: 40rpx;
			}

			.code-img {
				right: 30rpx;
				bottom: 44rpx;
			}

			.tip-comp {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #343535;
				line-height: 49rpx;
				border-bottom: 3rpx solid #1265B0;
				margin: 30rpx 0;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				width: 380rpx;
				display: block;
			}

			.c-bom {
				display: flex;
				flex-direction: column;
				margin-top: 30rpx;
			}

			.bor {
				width: 380rpx;
				height: 1rpx;
				background: #343535;
				margin-bottom: 20rpx;
			}

			.c-bom-item {
				display: flex;
				align-items: center;
				font-size: 20rpx;
				font-weight: 800;
				color: #343535;
				width: 400rpx;
			}

			.c-bom-text2 {
				flex: 1;
				// text-overflow: ellipsis;
				// overflow: hidden;
				// white-space: nowrap;
			}


			.c-bom-text1 {
				color: #1265B0;
				display: block;
				// width: 88rpx;
				white-space: nowrap;
			}

			.logo-img {
				width: 76rpx;
				height: 76rpx;
				border-radius: 50%;
			}

			.code-img {
				width: 76rpx;
				height: 76rpx;
			}

			.btn-box {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 686rpx;
			}

			.btn-box-text2 {
				// width: 430rpx;
				flex: 1;
				padding: 14rpx 0;
				text-align: center;
				display: block;
				border-radius: 10rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				box-sizing: border-box;

				border: 2px solid #009CFF;
				color: #009CFF;
				background-color: #F7F9FF;
			}

		}

	}
</style>